<template>
    <div class="case">
        <div class="banner">
            <div class="bg">
                <el-carousel>
                    <el-carousel-item v-for="item in bannerList" :key="item.id">
                        <img :src="$staticPath + item.imageAddress" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="banner-text">
                <div class="text">{{  bannerTitle.length > 0 ? bannerTitle[0].productTitle : '' }}</div>
                <div class="templace">SHENGHUANG SUCCESSFUL CASE SHOW</div>
            </div>
        </div>
        
        <CasePresentation :list="caseList" :caseTitle="caseTitle" />
    </div>
</template>

<script>
import CasePresentation from '@/components/CasePresentation'
export default {
    components: {
        CasePresentation
    },
    created() {
        this.getData()
        this.queryImage()
    },
    data() {
        return {
            caseList: [],      //案列列表
            caseTitle: [], //案例展示标题
            bannerList : [],        //轮播图列表
            bannerTitle : [],   //轮播图上方标题
            classIdList: ['1827604262051106818', '1828650784192712705','1828661669967679489'],   //分类id列表
        }
    },
    methods: {

        //获取图片
        queryImage() {
            this.request('queryImage', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId: '1828661596294729729'
            }).then(res => {
                this.bannerList = res
            })
        },

        //查询配置
        queryProgram(classificationId, index) {
            let dateNameList = ['caseList', 'caseTitle','bannerTitle']
            this.request('queryProgram', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId
            }).then(res => {
                let currentData = dateNameList[index]
                this[currentData] = res
            })
        },

        //获取数据
        getData() {
            this.classIdList.forEach((item, index) => {
                this.queryProgram(item, index)
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.case {
    .banner {
        position: relative;

        .banner-text {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            z-index: 999;

            .text {
                font-size: 50px;
                letter-spacing: 10px;
            }

            .templace {
                font-size: 38px;
                margin-top: 20px;
            }
        }
    }
}
</style>